<template>
  <div ref="graphWrapRef" style="height:300px;position: relative;">
    <h2>我的第四个mxgraph</h2>
    <div id="graphcontainer4-4" ref="graphcontainer4-4" class="graphWrap2 graph-edit"></div>
  </div>
</template>

<script>
import _ from "lodash";
import mxgraph from '@/utils/mxgraph'
const { mxEvent, mxRubberband, mxGraph, mxConstants, mxGraphModel, mxClient, mxUtils } = mxgraph
const MxGraph = mxGraph
const MxRubberband = mxRubberband
const MxGraphModel = mxGraphModel

export default {

  data() {
    return {

    }
  },
  mounted() {
    this.init()

  },
  methods: {
    init() {
      // 
      var container = document.getElementById('graphcontainer4-4')
      mxEvent.disableContextMenu(container)
      const model = new MxGraphModel()
      const graph = new MxGraph(container, model)
      graph.setTooltips(true);

      // Enables rubberband selection
      new MxRubberband(graph)

      // Gets the default parent for inserting new cells. This
      // is normally the first child of the root (ie. layer 0).
      var parent = graph.getDefaultParent()
      this.initStyle(graph)
      this.initLabelLength(graph)

      // Adds cells to the model in a single step
      graph.getModel().beginUpdate()
      try {
        var start = graph.insertVertex(parent, null, '我的名字叫做盘打不动米多笔录翁', 20, 20, 75, 75, 'start')
        var bill = graph.insertVertex(parent, null, 'Adds cells to the model in a single step and set the vertex', 180, 20, 75, 75, 'bill')
        var check = graph.insertVertex(parent, null, 'check', 350, 20, 75, 75, 'check')
        var end = graph.insertVertex(parent, null, 'end', 500, 20, 75, 75, 'end')
        graph.insertEdge(parent, null, '我有一个长长的名字', start, bill)
        graph.insertEdge(parent, null, '我有一个长长的名字2', bill, check)
        graph.insertEdge(parent, null, '我有一个长长的名字2', check, end)
      } finally {
        // Updates the display
        graph.getModel().endUpdate()
      }
    },
    initStyle(graph) {
      var vStyle = graph.getStylesheet().getDefaultVertexStyle()

      var style = _.cloneDeep(vStyle)
      style[mxConstants.STYLE_FONTSIZE] = '12'
      style[mxConstants.STYLE_FONTCOLOR] = 'black'
      style[mxConstants.STYLE_STROKECOLOR] = 'black'
      style[mxConstants.STYLE_FILLCOLOR] = 'white'
      style[mxConstants.STYLE_GRADIENTCOLOR] = 'white'
      style[mxConstants.STYLE_GRADIENT_DIRECTION] = mxConstants.DIRECTION_EAST
      style[mxConstants.STYLE_ROUNDED] = true
      style[mxConstants.STYLE_SHADOW] = true
      style[mxConstants.STYLE_FONTSTYLE] = 1
      style[mxConstants.STYLE_SHAPE] = mxConstants.SHAPE_LABEL
      style[mxConstants.STYLE_STROKECOLOR] = 'white'
      style[mxConstants.STYLE_ROUNDED] = true
      style[mxConstants.STYLE_SHADOW] = false
      style[mxConstants.STYLE_ALIGN] = mxConstants.ALIGN_CENTER
      style[mxConstants.STYLE_VERTICAL_ALIGN] = mxConstants.ALIGN_TOP
      style[mxConstants.STYLE_IMAGE_ALIGN] = mxConstants.ALIGN_CENTER
      style[mxConstants.STYLE_IMAGE_VERTICAL_ALIGN] = mxConstants.ALIGN_TOP
      style[mxConstants.STYLE_IMAGE] = '/images/start.png'
      style[mxConstants.STYLE_IMAGE_WIDTH] = '40'
      style[mxConstants.STYLE_IMAGE_HEIGHT] = '40'
      style[mxConstants.STYLE_SPACING_TOP] = '50'
      style[mxConstants.STYLE_SPACING] = '8'
      const styleList = [
        { cguid: 'start', imgUrl: '/images/start.png' },
        { cguid: 'bill', imgUrl: '/images/bill.png' },
        { cguid: 'check', imgUrl: '/images/check.png' },
        { cguid: 'end', imgUrl: '/images/end.png' }
      ]
      for (var i = 0; i < styleList.length; i++) {
        const item = styleList[i]
        const newStyle = _.cloneDeep(style)
        newStyle[mxConstants.STYLE_IMAGE] = item.imgUrl
        graph.getStylesheet().putCellStyle(item.cguid, newStyle)
      }

    },
    initLabelLength(graph) {
      //labels文字是否可以换行
       graph.htmlLabels = true;
      graph.isWrapping = function (cell) {
        return true;
      };
      // //label是否允许编辑
      graph.isCellEditable = function (cell) {
        //return !this.model.isEdge(cell);
        return false
      };

      // graph.getLabel = function (cell) {
      //   var label = (this.labelsVisible) ? this.convertValueToString(cell) : '';
      //   var geometry = this.model.getGeometry(cell);
      //   if (cell.isEdge()) {
      //     return ''
      //   }

      //   if (!this.model.isCollapsed(cell) && geometry != null && (geometry.offset == null ||
      //     (geometry.offset.x == 0 && geometry.offset.y == 0)) && this.model.isVertex(cell) &&
      //     geometry.width >= 2) {
      //     var style = this.getCellStyle(cell);
      //     var fontSize = style[mxConstants.STYLE_FONTSIZE] || mxConstants.DEFAULT_FONTSIZE;
      //     var max = geometry.width / (fontSize * 0.625);

      //     if (max < label.length) {
      //       return label.substring(0, max) + '...';
      //       // return `<div style="color:red">${label}</div>`
      //     }
      //   }

      //   return label;
      // };
    },
  },
}
</script>
<style scoped>
.graphWrap2 {
  position: relative;
  overflow: hidden;
  width: 821px;
  height: 241px;
  cursor: default;
  border: 1px solid grey;
}
.graph-edit {
  background: url("/images/grid.gif");
}
.graph-browse {
  background: none;
}
</style>


